const TodoFooter = ({ list, type, setType, clearCompleted }) => {
  const leftCount = list.filter((item) => item.done === false).length
  const typrList = ['All', 'Active', 'Completed']
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{leftCount}</strong> item left
      </span>
      <ul className="filters">
        {typrList.map((item) => {
          return (
            <li key={item}>
              <a
                className={type === item ? 'selected' : ''}
                href="#/"
                onClick={() => setType(item)}
              >
                {item}
              </a>
            </li>
          )
        })}
        {/* <li>
          <a className="selected" href="#/">
            All
          </a>
        </li> */}
      </ul>
      <button className="clear-completed" onClick={clearCompleted}>
        Clear completed
      </button>
    </footer>
  )
}

export default TodoFooter
